<template>
  <view class="pick-page" @click="globalTouth">
    <view class="pick-content">
      <template v-if="activeStep == 1">
        <g-button
          v-for="item in dataList"
          :key="item.value"
          :icon="item.icon"
          width="auto"
          :text="item.label"
          size="33.36rpx"
          padding="45rpx 0"
          gap="13.9rpx"
          radius="25rpx"
          :margin="item.margin"
          color="#333"
          background="#fff"
          @click="handleTake(item)"
        />
      </template>
      <template v-else>
        <view class="keyboard">
          <view class="indicate">
            <view class="indicate-top">
              <view class="indicate-title">取药指引</view>
              <g-button
                width="96.6rpx"
                text="查看视频"
                size="16.68rpx"
                padding="3.475rpx 0"
                radius="68rpx"
                @click="handlePreviewVideo"
              />
            </view>
            <image
              :src="guide.img"
              mode="scaleToFill"
              class="indicate-img"
              @click="handlePreviewImage(guide.img)"
            />
          </view>
          <g-keyboard @confirm="handleConfirm" />
        </view>
      </template>
    </view>
    <view class="flex-column">
      <g-button
        width="243.25rpx"
        text="返回首页"
        size="25.02rpx"
        padding="16.68rpx"
        radius="68rpx"
        @click="handleHome"
      />
      <view class="ad">
        <Ad-swiper
          :list="adList"
          height="383rpx"
          :muted="true"
          autoplay-value="displayDuration"
          :manual-switch="false"
          :video-end-play="true"
        />
      </view>
    </view>
    <g-footer />
    <uv-overlay :show="videoShow" @click="videoShow = false">
      <view class="flex-video">
        <video :src="guide.video" autoplay class="video" object-fit="contain" />
      </view>
    </uv-overlay>
    <g-toast
      v-model:show="toastShow"
      :status="submitStatus"
      :text="toastText"
      @close="closeToast"
    />
    <g-shadow ref="shadowRef" />
  </view>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getTerminal, getTerminalAdList, takeOutMedication } from "@/request/api";
import config from "@/request/baseUrl.js";
import AdSwiper from "@/components/AdSwiper/index.vue";
import meituan from "@/static/meituan.png";
import eleme from "@/static/eleme.png";
import jingdong from "@/static/jingdong.png";

const activeStep = ref<number>(1); // 当前步骤
const toastShow = ref<boolean>(false); // 提示弹窗
const dataList = ref<any>([
  {
    value: 1,
    label: "美团取药",
    margin: "77.84rpx 0 45.17rpx 0",
    icon: meituan,
  },
  {
    value: 2,
    label: "饿了么取药",
    margin: "0 0 45.17rpx 0",
    icon: eleme,
  },
  {
    value: 3,
    label: "京东取药",
    margin: "0 0 66rpx 0",
    icon: jingdong,
  },
]);
const takeType = ref<number>(1); // 取药方式
const guide = ref<any>({
  // 取药指引
  img: "",
  video: "",
});
const videoShow = ref<boolean>(false); // 视频预览
const adList = ref<any>([]); // 广告列表
const submitStatus = ref<number>(0); // 提交状态
const shadowRef = ref(); // 遮罩层
const serialNumber = ref<string>(""); // 序列号
const toastText = ref<string>(""); // 提示文本

onLoad(() => {
  let serial = uni.getStorageSync("serialNumber"); // 获取序列号
  if (serial) {
    serialNumber.value = serial;
    getAdList();
  }
  getTerminalInfo();
  getAdList();
  uni.$on("takeResult", (res: any) => {
    setTips(res);
  });
});

// 触发全局触摸事件
const globalTouth = () => {
  shadowRef.value.globalTouth();
};

// 获取取药指引
const getTerminalInfo = () => {
  getTerminal("mc_cabinet_guide").then((res: any) => {
    let obj = JSON.parse(res.data.value);
    obj.img = config.baseUrl + obj.img;
    obj.video = config.baseUrl + obj.video;
    guide.value = obj;
  });
};

// 预览指引图片
const handlePreviewImage = (url: string) => {
  uni.previewImage({
    current: 0,
    urls: [url],
  });
};

// 预览视频
const handlePreviewVideo = () => {
  videoShow.value = true;
};

// 获取广告列表
const getAdList = () => {
  getTerminalAdList(serialNumber.value).then((res: any) => {
    adList.value = res.data.map((i: any) => {
      let file = i.resources?.split(".");
      let type = file[file.length - 1];
      return {
        ...i,
        type: type == "mp4" ? "video" : "image",
        src: config.baseUrl + i.resources,
      };
    });
  });
};

// 选择取药方式
const handleTake = (item: any) => {
  activeStep.value = 2;
  takeType.value = item.value;
};

// 确认取药
const handleConfirm = (value: string) => {
  setTips(1);
  let password = uni.getStorageSync("serialPassword");
  let data = {
    serialNumber: serialNumber.value,
    medicationCode: value,
    password: password,
    source: takeType.value,
  };
  takeOutMedication(data)
    .then((res: any) => {
      console.log("取药日志：", res);
      if (res.code != 200) {
        setTips(3, res.msg);
      }
    })
    .catch((err: any) => {
      setTips(3);
    });
};

// 关闭提示弹窗后
const closeToast = () => {
  submitStatus.value = 0;
};

// 提示弹窗
const setTips = (tips: number, msg?: string) => {
  uni.$emit("takeStatus", tips);
  if (tips == 1) {
    submitStatus.value = 1;
    toastText.value = "正在取药...";
    toastShow.value = true;
  } else if (tips == 2) {
    submitStatus.value = 2;
    toastText.value = "取药成功";
    setTimeout(() => {
      toastShow.value = false;
      handleHome();
    }, 3 * 1000);
  } else {
    submitStatus.value = 3;
    toastText.value = msg || "取药失败";
    setTimeout(() => {
      toastShow.value = false;
    }, 30 * 1000);
  }
};

// 首页
const handleHome = () => {
  uni.$emit("backHome");
  uni.navigateBack({ delta: 1 });
};

watch(submitStatus.value, (val: number) => {
  uni.$emit("takeStatus", val);
});
</script>
<style lang="scss" scoped>
.pick-page {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(180deg, #c8df8f 0%, rgba(108, 197, 254, 0) 100%);
  padding: 34.75rpx;
  box-sizing: border-box;
  .pick-content {
    width: 100%;
    .keyboard {
      height: 634.5rpx;
      margin-bottom: 20rpx;
      .indicate {
        width: 100%;
        height: 183.48rpx;
        background: rgba(255, 255, 255, 0.8);
        padding: 13.9rpx 30.58rpx;
        border-radius: 25.02rpx;
        margin-bottom: 28.5rpx;
        box-sizing: border-box;
        .indicate-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15.29rpx;
          .indicate-title {
            font-size: 16.68rpx;
            font-weight: 700;
            color: #333;
            line-height: 24.325rpx;
          }
        }
        .indicate-img {
          width: 100%;
          height: 105rpx;
        }
      }
    }
  }
}
.flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ad {
  width: 100%;
  height: 383rpx;
  background-color: #fafafa;
  margin-top: 45.17rpx;
  box-sizing: border-box;
  overflow: hidden;
}
.flex-video {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  .video {
    width: 100%;
    min-height: 30%;
    max-height: 50%;
  }
}
</style>
